type typeCallback = (currentDate:number[]) =>void;

interface IDatePicker{
    getCurrent():number[];
    watch(callback:typeCallback):void;
}
enum DateMark{
    YEAR ='YEAR',
    MONTH ='MONTH',
    DAY ='DAY'
}
export default  class DatePicker implements IDatePicker{

    private yearArr:number[];
    private monthArr:number[]= [1,2,3,4,5,6,7,8,9,10,11,12];
    private dayArr:number[];
    private currentDate:number[]=new Array<number>(3);
    private callback:typeCallback;


    private oYearWrapper:HTMLDivElement = document.querySelector('.year-wrapper')!;
    private oMonthWrapper:HTMLDivElement = document.querySelector('.month-wrapper')!;
    private oDayWrapper:HTMLDivElement = document.querySelector('.day-wrapper')!;

    constructor(yearArr:number[], currentDate:number[]){
        
        this.yearArr = yearArr;
        this.currentDate = currentDate;
        this.dayArr = this.createDayArr(this.currentDate)
        this.initDom();
        this.bindEvent();
    }
    public getCurrent(): number[] {
       return this.currentDate;
    }
   public watch(callback: typeCallback): void {
        typeof callback === 'function' && (this.callback=callback);
    }
    private createDayArr([year,month]:number[]):number[]{
      const count = getDayCount(year,month);
      const arr:number[] = [];
      for(let i=1;i<=count;i++){
          arr.push(i);
      }
      return arr;
    }
    private initDom(){
        this.createItems(this.oYearWrapper, this.yearArr);
        this.createItems(this.oMonthWrapper, this.monthArr);
        this.createItems(this.oDayWrapper, this.dayArr);
        this.initCurrentDate(this.currentDate);
    }
    private bindEvent(){
        this.oYearWrapper.addEventListener('scrollend',
            this.setCurrentDate.bind(this,this.oYearWrapper,DateMark.YEAR),
            false);
        this.oMonthWrapper.addEventListener('scrollend',
            this.setCurrentDate.bind(this,this.oMonthWrapper,DateMark.MONTH),
            false);
        this.oDayWrapper.addEventListener('scrollend',
            this.setCurrentDate.bind(this,this.oDayWrapper,DateMark.DAY),
            false);
    }
    private initCurrentDate([year,month,day]:typeof this.currentDate){
        const yearIndex = this.yearArr.indexOf(year);
        const monthIndex = this.monthArr.indexOf(month);
        const dayIndex = this.dayArr.indexOf(day);

        setScrollY(this.oYearWrapper,yearIndex)
        setScrollY(this.oMonthWrapper,monthIndex)
        setScrollY(this.oDayWrapper,dayIndex)

    }
    private setCurrentDate(wrapper:HTMLElement, type:DateMark){
        const index = Math.floor(wrapper.scrollTop / 50);
        const [year, month, day] = this.currentDate;

        switch(type){
            case DateMark.YEAR:
                this.currentDate[0] = this.yearArr[index];
                this.dayArr = this.createDayArr(this.currentDate);
                this.createItems(this.oDayWrapper,this.dayArr);
                this.callback&& this.callback(this.currentDate);
                break;
            case DateMark.MONTH:
                this.currentDate[1] = this.monthArr[index];
                this.dayArr = this.createDayArr(this.currentDate);
                this.createItems(this.oDayWrapper,this.dayArr);
                this.callback&& this.callback(this.currentDate);
                break;
            case DateMark.DAY:
                this.currentDate[2] = this.dayArr[index];
                this.callback&& this.callback(this.currentDate);
                break;
            default:
                break;
        }
        // console.log( this.currentDate)
    }
    private createItems(wrapper:HTMLElement,arr:number[]){
       const oFrag = document.createDocumentFragment();
       const oScrollWrapper = wrapper.querySelector('.scroll-wrapper')!;

       for(let i=0;i<2;i++){
           const oItem = createPlaceholder();
           oFrag.appendChild(oItem);
       }
       arr.forEach(year=>{
           const oItem = document.createElement('div');
           oItem.classList.add('item');
           oItem.innerText = year + '';
           oFrag.appendChild(oItem);
       })

       for(let i=0;i<2;i++){
        const oItem = createPlaceholder();
        oFrag.appendChild(oItem);
    }
       oScrollWrapper.innerHTML = '';
       oScrollWrapper.appendChild(oFrag);
    }
}

function getDayCount(year:number,month:number):number{
    //月的天数
    return new Date(year, month, 0).getDate();
}

function createPlaceholder():HTMLDivElement{
    const oItem = document.createElement('div');
    oItem.classList.add('item');
    return oItem;
}

function setScrollY(wrapper:HTMLElement, index:number){
    wrapper.scrollTo(0,index*50)
}